<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form ref="form" class="form" :model="form" :rules="rules" label-width="200px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="机构名称" prop="hospitalId">
            <el-select v-model="form.hospitalId" placeholder="请选择" class="inp_wid">
              <el-option
                v-for="item in officeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生姓名" prop="name">
            <el-input v-model="form.name" class="inp_wid" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生职位" prop="positionId">
            <el-select v-model="form.positionId" placeholder="请选择" class="inp_wid">
              <el-option
                v-for="item in loanOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历职称" prop="tagIDList">
            <el-select
              v-model="form.tagIDList"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
              class="inp_wid"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="擅长项目" prop="labelIDList">
            <el-select
              v-model="form.labelIDList"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
            >
              <el-option
                v-for="item in labelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="医生自定义标签" prop="sort">
            <el-input v-model="form.sort" class="inp_wid" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生好评率" prop="descript">
            <el-input v-model="form.descript" class="inp_wid" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生预约量" prop="descript">
            <el-input v-model="form.descript" class="inp_wid" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生简介" prop="descript">
            <el-input v-model="form.descript" class="inp_wid" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="评星" prop="star">
            <el-rate :texts="starTxt" style="margin-top:8px" v-model="form.star" show-text></el-rate>
          </el-form-item>
        </el-col>-->
        <!-- <h5 class="titleInfo">图片信息</h5> -->
        <el-col :span="24">
          <el-form-item label="医生照片" prop="image">
            <!-- <uploadImg ref="uploadImg" :fileNum="fileNum"></uploadImg> -->
            <newUpload
              ref="uploadImg"
              :file-num="1"
              :file-list="fileList"
              :width="800"
              :height="800"
            />
            <div>图片尺寸为800px*800px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生资格证" prop="image">
            <!-- <uploadImg ref="uploadImg" :fileNum="fileNum"></uploadImg> -->
            <newUpload
              ref="uploadImg1"
              :file-num="1"
              :file-list="fileList1"
              :width="800"
              :height="600"
            />
            <div>最多上传1张，图片尺寸为800px*600px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生执业证" prop="image">
            <!-- <uploadImg ref="uploadImg" :fileNum="fileNum"></uploadImg> -->
            <newUpload
              ref="uploadImg2"
              :file-num="1"
              :file-list="fileList2"
              :width="800"
              :height="600"
            />
            <div>最多上传1张，图片尺寸为800px*600px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主诊医生资格证" prop="image">
            <!-- <uploadImg ref="uploadImg" :fileNum="fileNum"></uploadImg> -->
            <newUpload
              ref="uploadImg3"
              :file-num="1"
              :file-list="fileList3"
              :width="320"
              :height="166"
            />
            <div>最多上传1张，图片尺寸为320px*166px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生详情" prop="content">
            <Tinymce v-model="form.content" style="width:96%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin:30px 0" type="primary" @click="submitFn('form')">完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getHospitaldetails } from "@/api/couponList";
import uploadImg from "@/components/UploadImg/index";
import newUpload from "@/components/UploadImg/shopImgUp";
import Tinymce from "@/components/Tinymce";
import { hospitalAdd } from "@/api/hospitalAdd";
// import { companyList } from '@/api/branchOfficeDropDown'
import { loanDropDown } from "@/api/loanDropDown";
import {
  hospitalDropDown,
  createDoctor,
  getForGoodAtProjectList,
} from "@/api/doctorManage";
import { findDoctorsPositionList } from "@/api/jobTitle";
import { findDoctorTagsList } from "@/api/degreeTitles";

export default {
  name: "DoctorAdd",
  components: { uploadImg, Tinymce, newUpload },
  data() {
    return {
      form: {},
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      officeOption: [],
      statusOption: [],
      rules: {},
      options: [],
      loanOption: [],
      selectedOptions: [],
      list1: {},
      submitForm: {},
      labelOptions: [],
      fileNum: 1,
    };
    // return {
    //   starTxt: ["1星", "2星", "3星", "4星", "5星"],
    //   fileNum: 1,
    //   officeOption: [],
    //   userId: "",
    //   statusOption: [
    //     {
    //       value: "0",
    //       label: "是",
    //     },
    //     {
    //       value: "1",
    //       label: "否",
    //     },
    //   ],
    //   form: {
    //     hospitalId: "",
    //     name: "",
    //     positionId: "",
    //     tagIDList: [],
    //     labelIDList: [],
    //     sort: "",
    //     descript: "",
    //     image: "",
    //     star: 5,
    //     content: "",
    //   },
    //   rules: {
    //     hospitalId: [
    //       { required: true, message: "请选择医院名称", trigger: "blur" },
    //     ],
    //     name: [{ required: true, message: "请输入医院姓名", trigger: "blur" }],
    //     positionId: [
    //       { required: true, message: "请选择职位", trigger: "blur" },
    //     ],
    //     tagIDList: [
    //       { required: true, message: "请选择学历职称", trigger: "blur" },
    //     ],
    //     labelIDList: [
    //       { required: true, message: "请选择擅长项目", trigger: "blur" },
    //     ],
    //     sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
    //     descript: [{ required: true, message: "请输入简介", trigger: "blur" }],
    //     image: [{ required: true, message: "请上传图片", trigger: "blur" }],
    //     star: [{ required: true, message: "请评分", trigger: "blur" }],
    //     content: [{ required: true, message: "请编辑详情", trigger: "blur" }],
    //   },
    //   options: [],
    //   loanOption: [],
    //   selectedOptions: [],
    //   list1: {},
    //   submitForm: {},
    //   labelOptions: [],
    // };
  },
  inject: ["reload"],
  created() {
    console.log("query", this.$route);
  },
  mounted() {
    console.log("query", this.$route.query);
    this.userId = this.$route.query.id;
    console.log("uese", this.userId);
    if (this.$route.query.type == "edit") {
      this.$route.meta.title = "医生信息编辑";
    } else if (this.$route.query.type == "detail") {
      this.$route.meta.title = "医生信息详情";
      this.getDetails(this.userId);
    } else {
      console.log("揍你");
      this.$route.meta.title = "添加医生信息";
    }
    // 分公司列表
    this.getCompanyList();
  },
  methods: {
    // 获取详情
    getDetails(id) {
      let data = { id };
      getHospitaldetails(data).then((res) => {
        console.log("rs", res.data);
      });
    },
    // `````````````
    // 获取分公司列表
    getCompanyList() {
      const datas = {
        pageNum: "0",
        pageSize: "10000",
      };
      findDoctorTagsList(datas)
        .then((res) => {
          // console.log(res)
          const resData = res.data.data.list;
          const newData = [];
          resData.forEach((e) => {
            newData.push({
              value: e.id,
              label: e.name,
            });
          });
          this.options = newData;
          // console.log(newData)
        })
        .catch((error) => {
          this.$message.error(error);
        });
      findDoctorsPositionList(datas).then((res) => {
        // console.log(res)
        const resData = res.data.data.list;
        const newData = [];
        resData.forEach((e) => {
          newData.push({
            value: e.id + "",
            label: e.name,
          });
        });
        this.loanOption = newData;
      }),
        // 医院列表
        hospitalDropDown().then((res) => {
          const resData = res.data.data;
          const newData = [];
          resData.forEach((e) => {
            newData.push({
              value: e.id + "",
              label: e.name,
            });
          });
          this.officeOption = newData;
        });
      // 医生擅长项目
      getForGoodAtProjectList().then((res) => {
        const resData = res.data.data;
        const newData = [];
        resData.forEach((e) => {
          newData.push({
            value: e.id,
            label: e.name,
          });
        });
        this.labelOptions = newData;
      });
    },
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions;
      e = value;
      this.form.provinceId = e[0];
      this.form.cityId = e[1];
      // this.form.area = e[2]
    },
    // 修改提交
    submitFn(e) {
      console.log(this.form);
      this.form.image = this.$refs.uploadImg.submitUpload()[0];
      this.$refs[e].validate((valid) => {
        if (valid) {
          // this定义
          const tf = this.form;
          for (var n in tf) {
            if (tf.hasOwnProperty(n)) {
              if (tf[n].length) {
                continue;
              }
              if (tf[n] !== undefined) {
                tf[n] += "";
              }
            }
          }
          if (this.form.tagIDList.length > 0) {
            this.form.tagIDList = this.form.tagIDList.map(String);
          }
          if (this.form.labelIDList.length > 0) {
            this.form.labelIDList = this.form.labelIDList.map(String);
          } else {
            this.form.labelIDList = [];
          }
          const datas = this.form;
          console.log(datas);
          createDoctor(datas)
            .then((res) => {
              console.log(res);
              if (!res.data.code) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                this.$router.push("/doctorIndex");
                this.reload();
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: "warning",
                });
              }
            })
            .catch((error) => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
.inp_wid {
  display: inline-block;
  width: 236px !important;
}
</style>
